<template>
  <el-card class="selsctCard" shadow="never">
    <div class="headBox" style=" margin-bottom: 10px;">
      <div class="box-left">车辆状态</div>
      <div class="box-right">
        <div class="headValue" :class="item.value === listValue ? 'bckColr' : ''" v-for="(item, index) in list"
             :key="index" @click="titleCahnge(item)">
          <span>{{ item.label }}</span>
          <span>(</span>
          <span>{{ item.count }}</span>
          <span>)</span>
        </div>
      </div>
      <div style="clear: both"></div>
    </div>
    <div class="headBox" style="  margin-bottom: 10px;">
      <div class="box-left">整备中</div>
      <div class="box-right">
        <div class="headValue" :class="item.value === listValue1 ? 'bckColr' : ''"
             v-for="(item, index) in reorganizeList"
             :key="index" @click="titleCahnge1(item)">
          <span>{{ item.label }}</span>
          <span>(</span>
          <span>{{ item.count }}</span>
          <span>)</span>
        </div>
      </div>
      <div style="clear: both"></div>
    </div>
    <div class="headBox" style="  margin-bottom: 10px;">
      <div class="box-left">已出库</div>
      <div class="box-right">
        <div class="headValue" :class="item.value === listValue2 ? 'bckColr' : ''"
             v-for="(item, index) in outOfStorageList"
             :key="index" @click="titleCahnge2(item)">
          <span>{{ item.label }}</span>
          <span>(</span>
          <span>{{ item.count }}</span>
          <span>)</span>
        </div>
      </div>
      <div style="clear: both"></div>
    </div>
    <div class="headBox">
      <div class="box-left">闲置中</div>
      <div class="box-right">
        <div class="headValue" :class="item.value === listValue3 ? 'bckColr' : ''"
             v-for="(item, index) in inIdleList"
             :key="index" @click="titleCahnge3(item)">
          <span>{{ item.label }}</span>
          <span>(</span>
          <span>{{ item.count }}</span>
          <span>)</span>
        </div>
      </div>
      <div style="clear: both"></div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "index",
  props: {
    list: {
      type: Array,
      default: []
    },
    reorganizeList: {
      type: Array,
      default: []
    },
    outOfStorageList: {
      type: Array,
      default: []
    },
    inIdleList:{
      type: Array,
      default: []
    },
    reset: {
      type: Number,
      default: 0
    }

  },
  computed: {},
  watch: {
    reset: {
      handler(newVal) {
        if (newVal) {
          this.listValue = ''
          this.listValue1 = ''
          this.listValue2 = ''
          this.listValue3 = ''
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      listValue: '',
      listValue1: '',
      listValue2: '',
      listValue3: ''
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    titleCahnge(val) {
      this.listValue = val.value
      this.listValue1 = ''
      this.listValue2 = ''
      this.listValue3 =''
      this.$emit('changeStatus', val.value);
    },
    titleCahnge1(val) {
      this.listValue = '-1'
      this.listValue1 = val.value
      this.listValue2 = ''
      this.listValue3 =''
      this.$emit('changeReorganize', val.value);
    },
    titleCahnge2(val) {
      this.listValue = '-1'
      this.listValue1 = ''
      this.listValue2 = val.value
      this.listValue3 =''
      this.$emit('changeOutOfStorage', val.value);
    },
    titleCahnge3(val){
      this.listValue = '-1'
      this.listValue1 = ''
      this.listValue2 = ''
      this.listValue3 = val.value
      this.$emit('changeInIdle', val.value);
    }
  },
};
</script>

<style scoped lang="scss">
.selsctCard {
  margin-bottom: 16px;
  border-radius: 8px;

  .headBox {
    width: 100%;
    min-height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: start;

    .box-left {
      min-width: 75px;
      font-size: 14px;
      display: block;
      text-align: justify;
      text-align-last: justify;
      padding-right: 15px;
      box-sizing: border-box;
    }

    .box-right {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .headValue {
      // width: 15%;
      padding: 0 12px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
    }

    .bckColr {
      color: #fff;
      background: #1890ff;
      border: 0;
    }
  }
}

::v-deep .el-card__body {
  padding-bottom: 15px !important;
}
</style>


